<template>
  <div class="content-body">
    <div
      v-loading="loading"
      class="app-content"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.3)"
    >
      <mobile-content
        v-if="isMore === false && isEntity === false"
        ref="content"
        :layout="layout"
        @parent-more="moreCallBack"
        @parent-entity="parentEntity"
        @fact-closeLoading="closeLoading"
      />
      <mobile-more
        v-if="isMore === true && isEntity === false"
        ref="more"
        :layout="layout"
        @callBack="menuCallBack"
        @parent-entity="parentEntity"
      />
    </div>
    <div class="app-bottom">
      <mobile-footer :layout="layout" @fact-menu="menuClick" />
    </div>
    <mobile-entity ref="entity" />
    <!--    <div v-if="dataList" style="display: none">
      <iframe v-for="(item,index) in dataList" :key="'iframe-'+index" :src="item.url" />
    </div>-->
  </div>
</template>
<script>
import { queryUserDefaultLayout } from '@/api/mobile/menu'
import { saveSystemVital } from '@/api/config/config'
import MobileFooter from './components/footer'
import MobileContent from './components/content'
import MobileMore from './components/more'
import MobileEntity from './components/entity'
import { getToken } from '@/utils/auth'
import { requestGet } from '@/api/system/common'
export default {
  name: 'MobileIndex',
  components: { MobileFooter, MobileContent, MobileMore, MobileEntity },
  data() {
    return {
      columns: null,
      layout: null,
      moreColumn: null,
      loading: false,
      isMore: false,
      isEntity: false,
      screenWidth: document.body.clientWidth,
      timer: null,
      dataList: [],
      time: null
    }
  },
  watch: {
    screenWidth: {
      handler(newName, old) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          this.screenWidth = newName
          this.timer = true
          const that = this
          setTimeout(function() {
            that.sjCount(that.screenWidth)// 窗口大小变化后执行的方法
            that.timer = false
          }, 10)
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: true // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  created() {
    if (getToken()) {
      // 已登录
      this.initLayout()
      // this.initSystem()
    } else {
      this.$router.push({ path: '/s/login' })
    }
  },
  beforeDestroy() {
    if (this.time != null) {
      clearInterval(this.time)
    }
  },
  methods: {
    sjCount(screeWidth) {
      if (screeWidth >= 1024) {
        this.$router.push({ path: '/uc/index' })
      }
    },
    moreCallBack(data) {
      if (undefined !== data && data !== null) {
        this.isMore = true
        this.isEntity = false
        this.moreColumn = data
        this.$nextTick(() => {
          this.$refs.more.init(data, this.layout)
        })
      }
    },
    parentEntity(data) {
      if (undefined !== data && data !== null) {
        this.$refs.entity.init(data)
      }
    },
    menuCallBack(data) {
      if (undefined !== data && data !== null) {
        this.isMore = false
        this.isEntity = false
        this.$nextTick(() => {
          this.$refs.content.openMenu(data)
        })
      }
    },
    menuClick(menu) {
      this.isMore = false
      this.isEntity = false
      this.loading = true
      this.$nextTick(() => {
        this.$refs.content.openMenu(menu.id)
      })
    },
    closeLoading() {
      this.loading = false
    },
    saveVital() {
      saveSystemVital()
        .then(res => {})
        .catch(() => {
          console.log('记录信息失败！')
        })
    },
    initLayout() {
      queryUserDefaultLayout()
        .then(res => {
          const { data } = res
          this.layout = data
          this.saveVital()
        })
        .catch(() => {
          this.layout = {}
        })
    },
    initSystem() {
      requestGet('rest/api/manager/system/all', {}).then(res => {
        const { content } = res
        this.dataList = content
      })
      // this.time = setTimeout(this.initSystem, 10 * 60 * 1000)
    }
  }
}
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  position: relative;
}
.app-content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 60px;
  z-index: 1;
}
.app-bottom {
  position: fixed;
  left: 0;
  right: 0;
  height: 60px;
  bottom: 0;
  z-index: 100;
}
</style>
